<template>
  <div class="myMap">
      <slot name="header">我是header具名插槽的默认内容</slot>
      <div class="container" ref="scatterMap" :style="{'width':mapWeight,'height':mapHeight}"></div>
      <slot name="footer"></slot>
      <!-- <slot></slot> -->
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'myMap',
  data(){
    return {
      areaNode: 430000
    }
  },
  props: {
    mapWeight: {
      default:'600px',
      type: String
    },
    mapHeight: {
      default:'600px',
      type: String
    }
  },
  methods: {
    // 地图初始化
    mapInit (){
      let vm = this
      AMapLoader.load({
        "key": "4d776e4c8e794597f0166324a436f927",              // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        "AMapUI": {             // 是否加载 AMapUI，缺省不加载
            "version": '1.1',   // AMapUI 缺省 1.1
            "plugins":['geo/DistrictExplorer', 'misc/PointSimplifier'],       // 需要加载的 AMapUI ui插件
        },
        "Loca":{                // 是否加载 Loca， 缺省不加载
            "version": '1.3.2'  // Loca 版本，缺省 1.3.2
        },
      }).then((AMap)=>{
        vm.map = new AMap.Map(vm.$refs.scatterMap, {
          center:[112.94317,28.235145],
          zoom: 5,
          skyColor: '#031532',
          features: ['bg', 'road','point'],
          mapStyle: 'amap://styles/bcc1e5326d1803f2fc221979f83f2fb6',
          resizeEnable: true
        })
        let map = vm.map
        
        let districtExplorer = new AMapUI.DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: map
        })
        this.loadAreaNode(430000,districtExplorer)
      })
    },
    loadAreaNode (adcode, districtExplorer) {
      let vm = this
      if (vm.curAreaId === adcode && vm.curAreaId !== 430000) {
        return
      }
      vm.curAreaId = adcode
      districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
        //更新地图视野
        // vm.map.setBounds(areaNode.getBounds(), null, null, true)
        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons()
        //绘制父区域
        districtExplorer.renderParentFeature(areaNode, {
          cursor: 'default',
          bubble: true,
          strokeColor: '#88d2ff', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: vm.curAreaId === 430000 ? '#0114c6' : '#657df5', //填充色
          fillOpacity: 0.35, //填充透明度
          // fillOpacity: 1, //填充透明度
        })
        districtExplorer.setAreaNodesForLocating([areaNode])
      })
    }
  },
  mounted (){
    let vm=this
    this.$nextTick(()=>{
      vm.mapInit()      
    })
  }
}
</script>

<style scoped>
.container{
  margin: 0 auto;
}
</style>
